<template>
    <div id="navigation">
       <span id="nav-sp"> 导航栏</span>
        <ul class="ivu-menu ivu-menu-light ivu-menu-vertical">
          <li  class="ivu-menu-item" v-for="(item,index ) in menus" :key="index">
            <!-- <router-link :to="'/'+(item.name=='alert'?'':item.name )" id="nav-text" v-if="item.examples">{{item.name}}</router-link> -->
            <!-- 一级菜单 -->
            <span class="ivu-menu-item-group">{{item.pagename}}</span>
            <ul>
                <!-- 二级菜单 -->
              <li  v-for="(smenu,indexChild ) in item.children" :class="(isClickParent == index && isClickChild == indexChild)?'active':''"  :key="indexChild" @click="change(index, indexChild)" >
                  <a  class="ivu-menu-item-group-item" :href="'#/'+smenu.pagename">{{smenu.pagename}}</a>
                  <!-- <router-link :to="'/'+(smenu.name=='alert'?'':smenu.name )" id="nav-text">{{smenu.name}}</router-link> -->
              </li>
            </ul>
            </li>
        </ul>
    </div>
</template>
<script>
    import menus from './menus.json'
    export default {
      data(){
       return {
          menus:menus.data,
           isClickParent:10000,
           isClickChild:10000
       }
      },
      methods:{
          change(parent, child){
                this.isClickParent = parent
                this.isClickChild = child
          }
      }
    }
</script>
<style lang="scss">
    #navigation{
        width: 16.666666667%;
        position: fixed;
        overflow-y: auto;
        height: 880px;
        ul{
            list-style: none;
             .ivu-menu-item{
                 padding: 0;
                 padding-left: 20px;
                .ivu-menu-item-group{
                    height: 48px;
                    line-height: 48px;
                    font-size: 14px;
                    color: #999;
                 }
                 .ivu-menu-item-group-item{   
                   color: #515a6e;
                    padding-left:25px;
                    padding: 10px 20px;
                 }
                 
                .ivu-menu-item-group-item:hover{   
                    color: #2d8cf0;
                 }

               
                
             }  
                
        }
       
      
    }
    #navigation .ivu-menu .ivu-menu-item ul li.active a{
        color:#2d8cf0
    } 
    #navigation::-webkit-scrollbar{
        width: 5px;
    }
    #nav-sp{
        padding: 10px 20px;
        display:block;
        font-size:20px;
        // text-align:center;
        font-weight:800;
    }

    #nav-text{
        font-size:16px;
        margin-left:50px;
    }

</style>
<style scoped>
a{
    color:gray;
    display:block;
    width:100%;
}

</style>
